<template>
    <div class="home"  @scroll="scroll">
        <nav-bar ></nav-bar>
        <nav-menu :tabs='categorys' @changeCategoryId='setChannel'></nav-menu>
        <div class="default" v-if="!$route.params.id">
            <van-swipe class="swipe" indicator-color='#fb7299' v-if="swipe">
                <van-swipe-item v-for="(item,index) in swipe" :key="index" >
                    <a :href="item.url">
                        <img :src="item.pic" alt="" width="100%">
                    </a>
                </van-swipe-item>
            </van-swipe>
            <BlockList :list="list"></BlockList>
        </div>
        <keep-alive>
            <router-view :key='$route.params.id'></router-view>
        </keep-alive>
        <!-- <Channel :channel='channel' v-if="channel.rid" style="margin-top:0.3rem"></Channel> -->
    </div>
</template>
<script>
import NavBar from '../components/common/NavBar'
import NavMenu from '../components/common/NavMenu'
import BlockList from '../components/common/BlockList'
// import Channel from './Channel'


export default {
    data(){
        return{
            list:[],
            channel:{name:'首页'},
            swipe:[],
            categorys:this.$categorys
        }
    },
    components:{
        BlockList,
        NavMenu,
        NavBar
        // Channel
    },
    computed:{
        key(){
           return this.$route.params
        }
    },
    methods:{
        scroll(){
            console.log(1)
        },
        async setSwipe(){
            const swipe=await this.$axios.get('/static/x/web-show/res/locs?pf=7&ids=1695&decode=true');
            this.swipe=swipe.data.data['1695']
        },
        async getBlockList(){
            const res=await this.$axios.get('/static/x/web-interface/wx/hot?ps=100')
            this.list=res.data.data
            console.log(this.list)
        },
        setChannel(item){
            this.channel=item
        }
        
    },
    created(){
        //this.selectCategory()
        this.getBlockList()
        this.setSwipe()
    }
    

}
</script>
<style>
.channel .van-tabs--line .van-tabs__wrap{
  height: 3rem !important;
  border-bottom: 0.5px solid rgb(240, 240, 240);
}
.channel .van-tab{
  font-size: 1.18rem !important;
  padding: 0 1.3rem  !important;
  flex:none;
}
.channel .van-tabs__nav::-webkit-scrollbar{
    display: none;
}
.channel .van-tabs__nav{
  padding-bottom: 1rem;
  overflow-x:auto ;
  overflow-y: hidden;
}
.channel .van-tabs__line{
  left: 0 !important;
  z-index: 1 !important;
  width: 2.5rem !important;
  border-radius: 0.075rem !important;
  height: 0.15rem !important;
  min-height: 2px !important;
  bottom: 1rem;
}
.channel .van-tabs__wrap--scrollable {
  padding: 0 !important;
}
</style>
<style  lang='less' >
@import '../assets/css/common';

.home{
    background-color: #fff;
    .swipe{
        border-radius: 0.3rem;
        width: 95%;
        margin: 0.8rem auto 0 auto;
        height:8.35rem;
        overflow: hidden;
        background-color: #fff;
        .van-swipe__indicators{
            background-color: transparent;
            left:auto;
            right:0;
            bottom: 1rem;
            i{
                height:0.4rem !important;
                width: 0.4rem;
                border-radius: 0.4rem;
                margin-right: 0.4rem;
                background-color: #fff;
                .van-swipe__indicator--active{
                    background-color: @color;
                }
            }
        }
    }
}

</style>

